<template>
<div class="manager">
  <AdminFramework>
      <h1>博客管理</h1>
      <el-button @click="router.push('/admin/blog/edit')"
                 class="add_blog_btn"
                 type="primary"><font-awesome-icon icon="pen" /> 写博客</el-button>
      <el-table :data="blogs">
        <el-table-column width="60px" label="ID" prop="id" />
        <el-table-column label="文章标题" prop="title" />
        <el-table-column width="80px" label="回复数" prop="replyCount" />
        <el-table-column width="80px" label="点赞量" prop="likeCount" />
        <el-table-column width="80px" label="置顶" prop="placed">
          <template #default="scope">
            <el-tag :type="scope.row.placed?'success':'warning'" size="small">{{scope.row.placed?'置顶':'未置顶'}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column width="80px" label="隐藏" prop="visible">
          <template #default="scope">
            <el-tag :type="scope.row.visible?'success':'danger'" size="small">{{scope.row.visible?'可见':'隐藏'}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column width="200px" label="创建时间" prop="createTime" />
        <el-table-column width="300px" label="操作">
          <template #default="scope">
            <el-link :href="`/blog/${scope.row.id}`">查看</el-link>
            <el-link :href="`/admin/blog/edit?id=${scope.row.id}`">编辑</el-link>
            <el-link disabled>{{scope.row?.placed?'取消置顶':'置顶'}}</el-link>
            <el-link disabled>{{scope.row?.visible?'隐藏':'取消隐藏'}}</el-link>
            <el-link type="danger" @click="deleteBlog(scope.row.id)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
  </AdminFramework>
</div>
</template>

<script setup>
import AdminFramework from "../../../components/admin/UiFramework/AdminFramework.vue";
import {onMounted, ref} from "vue";
import axios from "axios";
import {useRouter} from "vue-router";
import {ElMessage, ElMessageBox} from "element-plus";
import {request} from "../../../api/baseFentch";

const blogs = ref();

const router = useRouter();

const getAllBlogs = async () => {
  let result = (await axios.get('/api/blog?type=all'))?.data
  if (result.code === 0) {
    blogs.value = result?.object
  }
}

const deleteBlog = async id => {
  ElMessageBox.confirm('此操作将会永久删除该博客，是否继续', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    let result = await request(`/blog/${id}`, 'DELETE');
    if (result?.code === 0) {
      ElMessage({
        type: 'success',
        message: '删除成功'
      })
      await getAllBlogs()
      return
    }
    ElMessage({
      type: 'error',
      message: result?.msg
    })
  })
}

onMounted(async () => {
  await getAllBlogs()
})
</script>

<style scoped>

.el-link {
  margin-right: 10px;
}

.add_blog_btn {
  margin: 10px 0;
}
</style>